處理元件事件

• 在開發自訂的元件時，需要進行事件傳遞的場景並不少見。例如前面撰寫的my-alert元件，在使用該元件時，當使用者點擊按鈕時會自動彈出系統的警告框，但更多時候，不同的專案使用的警告框風格可能並不一樣，彈出警告框的邏輯也可能相差甚遠，這樣看來，my-alert元件的重複使用性非常差，不能滿足各種訂製化需求。
• 如果要對my-alert元件進行改造，可以嘗試將其中按鈕點擊的時間傳遞給父元件處理，即傳遞給使用此元件的業務方處理。
• 在Vue中，可使用內建的$emit方法來傳遞事件，例如：

<div id="Application">
  <my-alert @myclick="appFunc" title="按鈕1"></my-alert>
  <my-alert title="按鈕2"></my-alert>
</div>

<script>
    const App = Vue.createApp({
      methods:{
        appFunc(){
          console.log('點擊了自定義元件')
        }
      }
    })
    const alertComponent = {
      props:["title"],
      template:'<div><button @click="$emit(\'myclick\')">{{title}}</button></div>'
    }
    App.component("my-alert",alertComponent)
    App.mount("#Application")
</script>

• 修改後的程式將my-alert元件中按鈕的點擊事件定義為myclick事件進行傳遞，在使用此元件時，可以直接使用myclick這個事件名稱進行監聽。